<template>
  <div class="aside-container">
    <div class="logo"></div>
    <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" background-color="#002033"
      text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse" style="border-right: 0">
      <el-menu-item :index="item.path" v-for="item in list" :key="item.id">
        <i :class="item.iron"></i>
        <span slot="title">{{item.title}}</span>
      </el-menu-item>

    </el-menu>
  </div>
</template>
<script>
  export default {
    name: 'Aside',
    props: ['isCollapse'],
    data() {
      return {
        list: [{
          id: 1,
          path: '/main',
          title: '首页',
          iron: 'el-icon-s-home'
        }, {
          id: 2,
          path: '/articles',
          title: '内容管理',
          iron: 'el-icon-document'
        }, {
          id: 3,
          path: '/images',
          title: '素材管理',
          iron: 'el-icon-picture'
        }, {
          id: 4,
          path: '/publish',
          title: '发布文章',
          iron: 'el-icon-s-promotion'
        }, {
          id: 5,
          path: '/comments',
          title: '评论管理',
          iron: 'el-icon-chat-dot-round'
        }, {
          id: 6,
          path: '/fans',
          title: '粉丝管理',
          iron: 'el-icon-present'
        }, {
          id: 7,
          path: '/settings',
          title: '个人设置',
          iron: 'el-icon-menu'
        }]
      }
    }
  }

</script>
<style lang="less" scoped>
  .logo {
    width: 100%;
    height: 60px;
    background: url('./logo.png') no-repeat;
    background-size: cover;
  }

  .el-menu-item {
    background-color: #002033;
  }

</style>
